<template>
    <div class="idcard-one">
        <div class="hotel-name">
            <div class="hotel-banner">
                <img :src="banner+'?x-oss-process=image/resize,m_fill,h_900,w_1023'" alt="">
            </div>
            <div class="hotel-logo">
                <img :src="src+'?x-oss-process=image/resize,m_fill,h_147,w_150'" alt="">
            </div>
            <div class="hotel-title">欢迎入住{{hotel_name}}</div>
        </div>
       
        <div class="hotel-card">身份认证</div>
        <div class="hotel-tip">为确保您的信息安全<br>请输入身份证后4位进行认证</div>

        <div class="container">
            <div class="vcode" id='vertifycode'>
                    <input type="tel" maxlength='4' ref='code' class='code' id='code' @focus="focus=true" v-model='code' @blur='focus=false' :disabled='disabled'>
                    <div class="labels">
                        <label class="label" for="code" :class="{'borderred': isred,active: focus===true && index===currentIndex}" v-for="(item,index) in length"  v-text="arrCode[index]"></label>
                    </div>
            </div>
        </div>
        <div v-if="isred" class="ccc">为避免认证失败，请输入本人身份证号后四位</div>
        <div @click="gocation()" class="authentication">去认证</div>
     
        <div class="popup-container">
			<mt-popup
			  v-model="popupVisible"
			  position="top"
			  :modal="modal">
			  {{popupContent}}
			</mt-popup>
		</div>
    </div>
</template>

<script>
import Header from '../common/header';
import axios from 'axios';
import utils from '../../extend/utils.js';
import { MessageBox, Popup } from 'mint-ui';
import VDistpicker from 'v-distpicker';  
import { setTimeout } from 'timers';
    export default {
        data () {
            return {
                popupVisible: false,
                modal: false,
                id_card: '',
                popupContent: '',
                length: 4,
                // currentIndex: 0,
                code: '',
                hotel_name: '',
                hotel_code: '',
                focus: false,
                // arrCode: [],
                disabled: false,
                isred: false,
                src: '',
                banner: '',
                ordernum: this.$route.query.orderNumber,
                cardInfo: [],
                detail_state: 0
            }
        },
        components: {
             'mt-popup': Popup,
        },
        computed: {
            arrCode: function () {
                // console.log( this.code.split(''));
                return this.code.split('');
            },
            currentIndex: function () {
                // console.log(this.code.length)
                return this.code.length;
            }
        },
        watch: {
            code: function (newV,oldV) {
                var self = this;
                this.code = newV.replace(/[^\d]/g,''); // 限制非数字
                console.log(oldV,'旧的');
                console.log(newV);
                if(newV.length >= 4) {
                    // this.disabled = true;
                    // this.$refs.code.blur();
                }else if(newV.length == 0){
                    this.isred = false;
                }
            }
        },
        created () {
            const vm = this;

            axios.post('/Weixin/Member/memberDetail', {}).then(json => {  
                if(json.data.data.hotel_code==""&&json.data.data.state==1){
                    vm.detail_state = 1;
                }
                console.log(json,1)
                if(json.data.data.state==3){
                    vm.$router.replace('/my_order')
                }
            });
            axios.post('/')
            axios.post('/Weixin/Hotel/hotelName',{orderNumber: vm.ordernum}).then(res=>{
                    const data = res.data;
                    console.log(data,654654654654654654654654654654654654654654654654654654)
                    if(data.code==1){
                        vm.hotel_name = data.hotel_name;
                        vm.hotel_code = data.hotel_code;
                        if(vm.detail_state==1){
                            axios.post('/Weixin/Member/editMember', {hotel_code: vm.hotel_code}).then(res => {});
                        }
                      
                        vm.src = data.hotel_logo?data.hotel_logo: 'http://ldfs.oss-cn-shenzhen.aliyuncs.com/e31a349c9b41d978650324d546056413.png';
                        vm.banner = data.hotel_img? data.hotel_img: 'http://ldfs.oss-cn-shenzhen.aliyuncs.com/e31a349c9b41d978650324d546056413.png';
                    }else {
                        MessageBox.alert(data.msg)
                    }
            }).catch(()=>{MessageBox.alert('网络错误')});


        },
        mounted() {
            const vm = this;
            let url = window.location.href;
            vm.wxShare(url);
            
        },
        methods: {
            gocation(){
                const vm = this;
                if(vm.code.length==4){
                    axios.post('/Weixin/Member/checkLastFour',{orderNumber: vm.ordernum,last_four: vm.code}).then(res=>{
                        const data = res.data;
                        console.log(data);
                        
                        if(data.code==1){
                             vm.isred = false;
                            vm.id_card = data.card.idNumber;
                            vm.cardInfo = data.card;
                            axios.post('/Weixin/Member/checkIdNumber',{idNumber: vm.id_card}).then(json=>{
                                const info = json.data;
                                console.log(info);
                                console.log(vm.cardInfo,'info');
                                if(info.code==1){
                                    MessageBox.confirm('', {
                                        title: `身份认证失败`,
                                        message: `您认证的身份证已被平台其他用户绑<br>定，请重新认证或者联系客服申诉`,
                                        confirmButtonText: '点击申诉',
                                        cancelButtonText: '重新认证',
                                        showCancelButton: true,
                                         closeOnClickModal: false
                                        }).then(() => {
                                            vm.cardInfo = utils.encrypt(JSON.stringify(vm.cardInfo),'hAw6eqnFLKxpsDv3');
                                            vm.$router.push({path: '/appeal',query: {'appeal_reason': 0,cardInfo: vm.cardInfo,'hotel_name': vm.hotel_name}});
                                    }).catch(() => {
                                            window.location.reload();
                                    });
                                }else {
                                    let obj = {
                                        name: vm.cardInfo.name,
                                        gender: vm.cardInfo.gender,
                                        birthDate: vm.cardInfo.birthDate,
                                        idNumber: vm.cardInfo.idNumber,
                                        card_img: '',
                                        nation: vm.cardInfo.nation,
                                        address: vm.cardInfo.address
                                    }
                                    axios.post('/Weixin/Member/bindIdCard',obj).then(res=>{
                                        const data = res.data;
                                        if(data.code==1){
                                            vm.$router.replace('/my_order');
                                        }else {
                                            MessageBox.alert(data.msg);
                                        }
                                    }).catch(()=>{MessageBox.alert('网络错误')})
                                   
                                }
                            })
                        }else {
                           vm.isred = true;
                        }
                    })
                }else {
                    vm.popupContent="请填写身份证后四位",
                    vm.modal = true;
                    vm.popupVisible = true;
                    setTimeout(function(){
                        vm.modal = false;
                        vm.popupVisible = false;
                    },1600)
                }
            }
        }
    }
</script>

<style type="text/css">
     .mint-msgbox-confirm {
        color: #3CACF8;  
    }
</style>
